<template>
  <div class="cps-search-form">
    <!-- el-row 用于布局，设置列间距为 24 -->
    <el-row :gutter="24">
      <!-- 循环渲染 el-col，根据 showSearchDataList 的数据 -->
      <el-col :span="colSpan"
              v-for="(item, index) in showSearchDataList"
              :key="index">
        <!-- 每个筛选项：
               -标签label（slot1） + 输入控件（slot2）
        -->
        <div class="flex mb-6px items-center">
          <!-- 具名插槽，根据 item.requestStr 拼接的字符串命名 -->
          <slot :name="`${item.prop}TR`"
                :record="item">
            <!-- 标签，显示 item.columnName 的值 -->
            <label class="w-120px tar mr-6px"> {{ item.label }}: </label>
          </slot>
          <slot :name="`${item.prop}CR`"
                :record="item">
            <el-input v-if="item.type == 'input'"
                      v-bind="item.attrs"
                      v-model="state.formState[item?.prop]"
                      :placeholder="`请输入${item.label}`">
            </el-input>
            <Select v-if="item.type == 'select'"
                    v-bind="item.attrs"
                    v-model="state.formState[item?.prop]"
                    :params="item.params"
                    :options="item.options"
                    :placeholder="`请选择${item.label}`">
            </Select>
            <el-date-picker v-if="item.type == 'date-picker'"
                            v-bind="item.attrs"
                            v-model="state.formState[item?.prop]"
                            :placeholder="`请选择${item.label}`">
            </el-date-picker>
            <el-input-number v-if="item.type == 'input-number'"
                             v-bind="item.attrs"
                             v-model="state.formState[item?.prop]"
                             :placeholder="`请选择${item.label}`">
            </el-input-number>
          </slot>
        </div>
      </el-col>
      <!-- 根据条件渲染 el-col，用于显示操作按钮 -->
      <el-col :span="actionSpan"
              v-if="showSearchDataList.length">
        <el-space style="float: right">
          <button :throttle="0"
                  type="link"
                  @click="toggleMoreFilter">
            <!-- 根据折叠状态显示不同的模板 -->
            <template v-if="state.isFolder">
              <el-icon>
                <ArrowUpBold />
              </el-icon>收起筛选
            </template>
            <template v-else>
              <el-icon>
                <ArrowDownBold />
              </el-icon>更多筛选
            </template>
          </button>
          <el-button @click="onReset">重置</el-button>
          <!-- cps-button，用于触发搜索操作 -->
          <el-button type="primary"
                     @click="onSearch">搜索</el-button>
        </el-space>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
const props = defineProps({
  SearchDataList: {
    type: Array,
    default: () => []
  },
  max: {
    type: Number,
    default: 4
  },
  colSpan: {
    type: Number,
    default: 6
  }
})
const emits = defineEmits(['reset', 'search'])

const DISPLAY_MAX_ON_FOLDED = props.max
const colSpan = props.colSpan
const showSearchDataList = ref(props.SearchDataList)
const state = reactive({
  dataList: [], // 筛选框数据源，data一层处理，getConfigColumn二层处理增加options
  col: 3, // 列数
  isFolder: true, // 是否折叠状态
  showMax: DISPLAY_MAX_ON_FOLDED, // 显示的最大数量
  formState: {}
})

const toggleMoreFilter = () => {
  state.isFolder = !state.isFolder
  console.log(state.isFolder)
  if (!state.isFolder) {
    showSearchDataList.value = props.SearchDataList.slice(
      0,
      DISPLAY_MAX_ON_FOLDED
    )
  } else {
    showSearchDataList.value = props.SearchDataList
  }
}

// 触发搜索事件的方法
const onSearch = () => {
  setTimeout(() => {
    emits('search', state.formState)
  }, 200)
}

// 触发重置事件的方法
const onReset = () => {
  //   state.formdata = cloneDeep(state.formState)
  //   state.formState = {}
  setTimeout(() => {
    emits('reset', state.formState)
  }, 200)
}

onMounted(() => {
  toggleMoreFilter()
})
const { formState } = toRefs(state)
defineExpose({ formState })
</script>
<style lang="scss" scoped>
.ant-radio-wrapper {
  font-size: 12px;
}
</style>
